﻿@page "/blazor/examples/page-stack/tab2/{parameter}"
@layout PageStackLayout
@inject NavigationManager NavigationManager

<p class="caption">url: /blazor/examples/page-stack/tab2/{parameter}</p>

<p class="text-h5"><b>@Parameter</b> created at @(_pageCreatedAt.ToString("HH:mm:ss zz"))</p>

<p>
    <MChip Label Color="primary">Persistent</MChip>
    <MChip Label Color="primary">Self</MChip>
</p>

<MAlert Type="AlertTypes.Warning" Dense>
    此标签页演示了使用路由参数的用法。
    但在页面更改状态后，再次点击'Tab 2'时，会重置该页面的状态。
    <br/>
    The tab demonstrates the usage of route parameters.
    However, after changing the state of the page, clicking 'Tab 2'
    again will reset the state of that page.
</MAlert>

<ul>
    <li>@RenderAnchor("/blazor/examples/page-stack/tab2/Today", "Today")</li>
    <li>@RenderAnchor("/blazor/examples/page-stack/tab2/Tomorrow", "Tomorrow")</li>
    <li>@RenderAnchor("/blazor/examples/page-stack/tab2/ThisWeek", "ThisWeek")</li>
    <li>@RenderAnchor("/blazor/examples/page-stack/tab2/Done", "Done")</li>
</ul>

@code {

    [Parameter] public string? Parameter { get; set; }

    private readonly DateTimeOffset _pageCreatedAt = DateTimeOffset.UtcNow;

    /// <summary>
    /// Render anchor tag with a replacement navigation.
    /// </summary>
    /// <param name="href"></param>
    /// <param name="content"></param>
    /// <returns></returns>
    private RenderFragment RenderAnchor(string href, string content) => __builder =>
    {
        <a href="@href"
           @onclick:preventDefault
           @onclick="@(() => NavigationManager.NavigateTo(href, replace: true))">
            @content
        </a>
    };

}
